<!--信息安全-统计分析-违规情况突出的账号-->
<template>
  <div class="number-table">
    <div v-if="right">
      <p class="table-title">厂商人员违规进行管理员操作/涉敏操作情况突出的账号情况</p>
      <el-table border
                :data="tableData"
                :height="tableHeight">
        <el-table-column prop="rn"
                         label="排名"
                         width="50"
                         align="center"></el-table-column>
        <el-table-column prop="prvdName"
                         label="公司"
                         align="center"
                         min-width="100"></el-table-column>
        <el-table-column prop="mainAccount"
                         label="主账号"
                         align="center"
                         min-width="80"
                         :formatter="formatNum">
          <template slot-scope="scope">
            <el-link type="info"
                     @click="
                         rightTable(scope)">{{scope.row.mainAccount}}</el-link>

          </template>
        </el-table-column>
        <el-table-column prop="mainAccountType"
                         label="主账号类型"
                         align="center"
                         min-width="80"></el-table-column>
        <el-table-column prop="unrightNum"
                         label="违规进行管理员操作的次数"
                         align="center"
                         :formatter="formatNum"></el-table-column>
        <el-table-column prop="onFactorScale"
                         label="在本公司违规进行管理员操作的次数占比"
                         align="center"
                         :formatter="formatPer"></el-table-column>
        <el-table-column prop="onFactorScale"
                         label="违规进行涉敏操作的次数"
                         align="center"
                         :formatter="formatPer"></el-table-column>
        <el-table-column prop="onFactorScale"
                         label="在本公司违规进行涉敏操作的次数占比"
                         align="center"
                         :formatter="formatPer"></el-table-column>
      </el-table>
    </div>
    <!-- 账号管理违规点击主账号下钻表格 -->
    <div v-show="!right">
      <el-button class="back-btn"
                 size="mini"
                 type="primary"
                 @click="backTop">返回</el-button>
      <span class="table-title  account_detail">主账号连续6个月违规情况</span>
      <el-table border
                :data="resultData"
                :height="tableHeight - 10">
        <el-table-column prop="audTrm"
                         label="审计月"
                         align="center"
                         min-width="100"></el-table-column>
        <el-table-column prop="prvdName"
                         label="公司"
                         align="center"
                         min-width="100"
                         :formatter="formatNum"></el-table-column>
        <el-table-column prop="mainAccount"
                         label="主账号"
                         align="center"
                         min-width="100"></el-table-column>
        <el-table-column label="违规进行管理员操作">
          <el-table-column prop="illAdminNum"
                           label="违规次数"
                           align="center"
                           min-width="100"></el-table-column>
          <el-table-column prop="isAdminTop50"
                           label="是否当月top50的账号"
                           align="center"
                           min-width="100">
            <template slot-scope="scope">{{scope.row.isAdminTop50 | changTop}}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="违规进行涉敏操作">
          <el-table-column prop="illSenNum"
                           label="违规次数"
                           align="center"
                           min-width="100"></el-table-column>
          <el-table-column prop="isSenTop50"
                           label="是否当月top50的账号"
                           align="center"
                           min-width="100">
            <template slot-scope="scope">
              {{scope.row.isSenTop50 | changTop}}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import SubTableMixin from "@/components/SubjectPage/mixins/SubTable";

export default {
  name: "JobNum",
  filters: {
    changTop(type) {
      if (type === 0) {
        return "是";
      } else {
        return "否";
      }
    }
  },
  mixins: [SubTableMixin],
  data() {
    return {
      // 表格数据
      tableData: null,
      resultData: null,
      right: true, //表格下钻
      concern: "1301"
    };
  },
  computed: mapState({
    tableHeight: state => state.contentHeight - 338, // table内容高度
    prvdId: state => state.subject.prvdId, // 省公司id
    audTrm: state => state.subject.audTrm, // 审计月
    flagId: state => state.khxxaq.flagId // 域id
  }),
  watch: {
    prvdId(newVal, oldVal) {
      this.loadDetailTable();
    },
    audTrm(newVal, oldVal) {
      this.loadDetailTable();
    },
    concern(newVal, oldVal) {
      this.loadDetailTable();
    },
    flagId(newVal, oldVal) {
      this.loadDetailTable();
    }
  },
  created() {
    this.loadDetailTable();
  },

  methods: {
    // 查询结果
    loadDetailTable() {
      this.logRecord(
        "审计专题",
        "客户信息安全管理违规",
        "重点关注工号表格数据",
        "查询"
      );
      // 获取表格数据
      this.$api.khxxaq
        .getJobNumData({
          prvdId: this.prvdId,
          audTrm: this.audTrm,
          concern: this.concern,
          flagId: this.flagId
        })
        .then(res => {
          // 表格数据初始化
          this.right = true;
          this.tableData = res.tableData;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    rightTable(scope) {
      this.resultData = [];
      // 获取表格数据
      this.$api.khxxaq
        .getMainTab({
          prvdId: this.prvdId,
          audTrm: this.audTrm,
          concern: this.concern,
          flagId: this.flagId,
          priAcct: scope.row.mainAccount
        })
        .then(res => {
          this.right = !this.right;
          // 表格数据初始化
          this.resultData = res.tableData;
        })
        .catch(err => {
          this.$message.error(err);
        });
      this.logRecord(
        "审计专题",
        "客户信息安全管理违规",
        "主账号连续6个月违规情况统计表格数据",
        "查询"
      );
    },
    // 返回上一级
    backTop() {
      this.right = true;
      this.loadDetailTable();
    },
    formatTop(row, column) {
      const { isTop } = row;
      if (isTop === 0) {
        return "是";
      } else {
        return "否";
      }
    }
  }
};
</script>
<style scoped lang="scss">
.number-table {
  width: 100%;
  i {
    cursor: pointer;
  }
  .back-btn {
    position: absolute;
    top: 0;
    right: 0;
  }

  .table-title {
    text-align: center;
    display: block;
    color: #fff;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .account_detail {
    margin-top: 2vw;
  }
}
</style>
